canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}

svg path {

stroke: lime;
stroke-width: 3;
fill: none;
}

svg rect {
fill: white;
stroke:pink;
stroke-width: 1;
fill-opacity:0.2;
}

svg text {
fill: black;
opacity: 0;
}

svg text.gridtext {
fill: black;
opacity: 1;
}

svg .name {
opacity: 0;
}

svg circle {
opacity: 0;
}

svg line.grids {
stroke-dasharray: 5, 4, 7, 5;
stroke: black; 
stroke-width: 2;
stroke-opacity: 0.3;
}

svg line.baseline {
stroke: black; 
stroke-width: 2;
stroke-opacity: 0.3;
}

svg .gridcontrol {
fill: black;
}
/*
svg .focusedcircle, svg .focusedtext {
opacity: 1;
}

svg .focusedpath {
stroke: green;
opacity: 1;
}

svg .compath {
stroke: red;
opacity: 0.3;
}

svg .comtext {
fill: red;
opacity: 1;
}
*/


svg .unfocused {
opacity: 0.3;
}

svg .hover circle, svg .hover text {
opacity: 1;
}

svg .hover path {
stroke: green;
opacity: 1;
}

svg .compath path {
stroke: red;
opacity: 0.3;
}

svg .compath .name {
fill: red;
opacity: 1;
}